<template>
  <div class="div1">
    <div class="position">
      <div id="HouseHeader">
        <span class="project-title">
          <i title="这是一个仓库"
            ><el-icon style="top: 3px"><HomeFilled /></el-icon
          ></i>
          <a style="text-decoration: none; color: #000" @click="touserpage">{{
            this.$route.params.username
          }}</a>
          /
          <a
            style="
              padding-bottom: 0px;
              margin-right: 4px;
              text-decoration: none;
              color: #000;
            "
            >{{ this.$route.params.housename }}</a
          ></span
        >
        <span
          style="margin-right: 20%"
          v-if="this.$route.params.username != this.username"
        >
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="取消"
            :icon="InfoFilled"
            @confirm="fork"
            icon-color="#626AEF"
            title="fork这个仓库?"
          >
            <template #reference>
              <el-button
                type="info"
                style="width: auto; position: relative; text-align: left"
              >
                <svg
                  aria-hidden="true"
                  height="16"
                  viewBox="0 0 16 16"
                  width="16"
                  style="position: relative; left: -5px"
                >
                  <path
                    fill-rule="evenodd"
                    d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
                  ></path>
                </svg>
                <font color="black"> Fork </font>
              </el-button>
            </template>
          </el-popconfirm>
        </span>
      </div>
      <div>
        <el-button class="buttonNav" @click="code" id="code"
          ><el-icon><Fold /></el-icon>代码</el-button
        >

        <el-button class="buttonNav" @click="toIssue" id="issues"
          ><el-icon><ChatDotRound /></el-icon>Issues</el-button
        >

        <el-button class="buttonNav" @click="toPr" id="pr"
          ><el-icon><Share /></el-icon>pull request</el-button
        >

        <!-- 隐藏 -->
        <span v-if="this.$route.params.username == this.username">
          <el-button class="buttonNav" @click="toHouseSetting" id="setting"
            ><el-icon><Setting /></el-icon>设置</el-button
          >
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "HouseHeader",
  data() {
    return {
      username: "",
    };
  },
  mounted() {
    this.username = window.sessionStorage.getItem("username");
    console.log("username:" + this.username);
  },
  methods: {
    fork() {
      request
        .post(
          "/house/fork?ownername=" +
            this.$route.params.username +
            "&housename=" +
            this.$route.params.housename
        )
        .then((res) => {
          console.log(res);
          ElMessage(res.message);
        });
    },
    reset() {
      var but = document.getElementsByClassName("buttonNav");
      for (var i = 0; i < but.length; ++i) {
        but[i].style.color = "black";
      }
    },
    toIssue() {
      this.reset();
      var but = document.getElementById("issues");
      but.style.color = "orange";
      this.$router.push(
        "/househomepage/" +
          this.$route.params.username +
          "/" +
          this.$route.params.housename +
          "/showissue"
      );
    },
    code() {
      this.reset();
      var but = document.getElementById("code");
      but.style.color = "orange";
      this.$router.push(
        "/househomepage/" +
          this.$route.params.username +
          "/" +
          this.$route.params.housename +
          "/housecode"
      );
    },
    toPr() {
      this.reset();
      var but = document.getElementById("pr");
      but.style.color = "orange";
      this.$router.push(
        "/househomepage/" +
          this.$route.params.username +
          "/" +
          this.$route.params.housename +
          "/newpullrequest"
      );
    },
    touserpage() {
      this.$router.push("/userhomepage/" + this.username);
    },
    toHouseSetting() {
      this.reset();
      var but = document.getElementById("setting");
      but.style.color = "orange";
      this.$router.push(
        "/househomepage/" +
          this.$route.params.username +
          "/" +
          this.$route.params.housename +
          "/housesetting-baseinfo"
      );
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
}
.div1 {
  background-color: #f6f6f6;
  width: 100%;
  height: 100px;
}
.position {
  background-color: #f6f6f6;
  position: absolute;
  width: 80%;
  left: 20%;
}
#HouseHeader {
  display: flex;
  justify-content: space-between;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  height: 60px;
  align-items: center;
  font-size: 20px !important;
  font-weight: bold !important;
  color: rgb(0, 0, 0);
}
.buttonNav {
  background-color: #f00f0f00;
  width: 150px;
  border-style: none;
  margin-right: 6%;
  font-size: medium;
}
</style>
